<template>
  <div class="MQuanBox">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.go(-1)"
      style="position: sticky; top: 0; left: 0"
    />

    <van-skeleton title avatar :row="20" :loading="!message" />

    <van-pull-refresh
      v-model="isLoading"
      @refresh="getMiquanMessage"
      v-if="message"
    >
      <!-- 标题 -->
      <div class="title">{{ message?.title }}</div>

      <!-- 用户信息 -->
      <div>
        <div class="user">
          <div class="userimg">
            <van-image
              style="width: 26rem; margin-right: 10rem"
              :src="message.icon"
            ></van-image>
            <div class="user-info">
              <span style="font-size: 14rem">{{ message.nickname }}</span>
              <span style="font-size: 12rem; color: #afafaf">
                {{ message.create_time }}</span
              >
            </div>
          </div>

          <div class="guanzhu">+关注</div>
        </div>
      </div>

      <!-- 文章详情 -->
      <div class="MQarticle" v-html="message.article_h5"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getmiquanItem } from "@/api/index";
export default {
  name: "MQuan",
  data() {
    return {
      // 下拉刷新
      isLoading: false,
      // 骨架屏
      GJloading: false,
      message: null,
    };
  },
  methods: {
    getMiquanMessage() {
      getmiquanItem(this.$route.query.id).then((res) => {
        this.message = res.data.data;
        this.isLoading = false;
        console.log(res);
      });
    },
  },
  created() {
    this.getMiquanMessage();
  },
};
</script>


<style lang="less" scoped>
// 米圈大盒子
.MQuanBox {
  width: 100vw;
  height: 94vh;
  overflow-y: scroll;
}

// 文章标题
.title {
  font-weight: 700;
  font-size: 30rem;
  padding: 20rem 10rem;
}

// 用户信息

.user {
  display: flex;
  align-items: center;
  padding: 10rem 10rem;
  justify-content: space-between;
  margin-bottom: 20rem;
  .userimg {
    display: flex;
  }

  .user-info {
    display: flex;
    flex-direction: column;
  }
}
</style>




















<style lang="less">
// 文章详情

.MQarticle {
  padding: 10rem 10rem;
  box-sizing: border-box;
  p {
    line-height: 30rem;
    img {
      width: 95vw;
    }
  }
}
</style>